<script src="<?php echo base_url('theme/js/frontend/countdown.js'); ?>"></script>
<style>
/* Local */
.bid-container {
	padding: 20px 50px;
	min-height: 600px;
}
.bid-wrapper {
    border-left: 1px solid #C6C6C6;
    border-right: 1px solid #C6C6C6;
    padding: 15px 30px;
}
hr.line {
    border-bottom: 1px solid #FFFFFF;
    border-top: 1px solid #C6C6C6;
    margin: 0 16px;
}
/* Tabs */
ul.tab-list {
	font-weight: bold;
	text-align: center;
	height: 32px;
	margin-bottom: 36px;
}
ul.tab-list > li {
    background-color: #5080D8;
    border-right: 4px solid #FFFFFF;
    float: left;
    width: 126px;
    height: 32px;
}
ul.tab-list > li.active {
    background-color: #0049BA;
}
ul.tab-list > li > a {
    color: #FFFFFF;
    display: block;
    padding: 8px 2px 0;
}
.tab-block .tab-content {
    display: none;
}
.tab-content:first-child {
	display: block;
}
.tab-block {
	padding-top: 8px;
}
/* Radio button */
input[type="checkbox"] {
    display: none;
}
[id^="checkbox-"] + label {
    background-color: #FFFFFF;
    border: 1px solid #C1CACA;
    border-radius: 1000px 1000px 1000px 1000px;
    display: inline-block;
    margin-right: 6px;
    padding: 8px;
    position: relative;
    margin-bottom: -4px;
}
[id^="checkbox-"]:checked + label {
    background-color: #ECF2F7;
    border: 1px solid #92A1AC;
    color: #243441;
}
[id^="checkbox-"]:checked + label:before {
    background: none repeat scroll 0 0 #253C4B;
    border-radius: 100px 100px 100px 100px;
    box-shadow: 0 15px 23px -10px rgba(187, 230, 240, 0.3) inset, 0 2px 2px rgba(0, 0, 0, 0.1);
    content: " ";
    display: block;
    height: 12px;
    left: 2px;
    position: absolute;
    top: 2px;
    width: 12px;
}
/* Form */
select {
	width: 100px;
}
.form-horizontal .control-label {
    text-align: left;
    width: 50px;
    font-size: 12px;
}
.form-horizontal .controls {
    margin-left: 60px;
}
/* Table */
.table thead th, .table td {
	text-align: center;
    vertical-align: middle;
}
.table tbody tr.gray > td,
.table thead tr > th {
    background-color: #cdcdcd;
    height: 40px;
}
.table tr.expand {
	display: none;
	background-color: #cdcdcd;
}
.table tr.expand td {
	padding: 16px 16px 0;
}
/* Local */
.note {
	color: red;
	font-size: 11px;
	margin-top: 4px;
}
.coundown {
	background-color: #ffffff; 
	padding: 14px 12px 8px; 
	margin-top: 8px;
}
.coundown-bottom {
	background-color: #eaeadc; 
	padding: 6px 12px; 
	font-weight: bold; 
	color: #666666;
}
.bid-block {
	float: left; 
	text-align: left; 
	margin-left: 26px;
}
</style>
<?php $flag1 = $flag2 = $flag3 = $flag4 = $flag5 = $flag6 = FALSE; ?>
<?php foreach ($check_types as $_check_types): ?>
    <?php 
    if ($_check_types['type_catalog'] == 1) {
        $flag1 = TRUE; 
    } elseif ($_check_types['type_catalog'] == 2) {
        $flag2 = TRUE; 
    } elseif ($_check_types['type_catalog'] == 3) {
        $flag3 = TRUE; 
    } elseif ($_check_types['type_catalog'] == 4) {
        $flag4 = TRUE; 
    } elseif ($_check_types['type_catalog'] == 5) {
        $flag5 = TRUE; 
    } elseif ($_check_types['type_catalog'] == 6) {
        $flag6 = TRUE; 
    }
    ?>  
<?php endforeach; ?>
<?php $data = array(
			'flag1' => $flag1,
            'flag2' => $flag2,
            'flag3' => $flag3,
            'flag4' => $flag4,
            'flag5' => $flag5,
            'flag6' => $flag6,
);?>
<div class="bid-container">
  <h3>Đấu giá vị trí quảng cáo</h3>
  <hr class="line" />  
  <div class="bid-wrapper">
    
    <ul class="tab-list">
      <li class="active"><a href="#tab-1">Top trang chủ</a></li>
      <li><a href="#tab-2">Top chuyên mục</a></li>
      <li><a href="#tab-3">Top banner</a></li>
    </ul>
    
    <hr class="line" />  
    <div class="tab-block">
      <div id="tab-1" class="tab-content homepage">
 		<?php $this->load->view('bid/home.php', $data); ?> 	
      </div>
      <div id="tab-2" class="tab-content category">
	    <?php $this->load->view('bid/category.php', $data); ?> 
      </div>
      <div id="tab-3" class="tab-content banner">
        <?php $this->load->view('bid/banner.php', $data); ?>
      </div>
    </div> 
    <script type="text/javascript">
      $(document).ready(function() {
        // Sự kiện click tab bất kỳ
        $('ul.tab-list li a').click(function(){ 
          $('ul.tab-list li').removeClass('active');
          $(this).parent().addClass('active'); 
         
          var currentTab = $(this).attr('href'); 
          $('.tab-block > .tab-content').hide();
          $(currentTab).show();
           
          return false;
        }); // end Sự kiện click tab bất kỳ
      });
    </script>
  </div> <!-- /bid-wrapper -->
  <hr class="line" />
</div> <!-- /bid-container -->